@page
@{ Layout = "_LayoutApp"; }

<div>
    <el-collapse v-model="activeNames" class="p-2 bg-light">
        <el-collapse-item class="pb-0" :name="item.guid" :title="item.mark" v-for="item in list">
            <template slot="title">
                <div class="px-2"><i class="bi bi-trophy-fill me-2 text-warning"></i>{{ item.mark }}</div>
            </template>
            <el-card class="rounded-0">
                <div slot="header">
                    <div align="center">
                        <p>（{{item.mark}}）</p>
                        <div class="text-primary">{{ item.pkBeginDateTimeStr }}-{{ item.pkEndDateTimeStr }}</div>
                    </div>
                </div>
                <div>
                    <el-card class="rounded-0 mb-3" v-for="room in item.roomList">
                        <div class="d-flex justify-content-between align-items-center" v-on:click="btnViewRoomClick(room)">
                            <div>
                                <div v-if="room.userId_A>0" class="text-center">
                                    <div class="avatar avatar-lg">
                                        <img :src="room.userA.avatarUrl || DEFAULT_AVATAR_URL" class="rounded-circle">
                                    </div>
                                    <div class="text-center">
                                        {{ room.userA.displayName }}
                                    </div>
                                    <div class="mt-1" v-if="room.finished">
                                        <span v-if="room.winUserId==room.userId_A" class="text-success">胜</span>
                                        <span v-else class="text-danger">负</span>
                                    </div>
                                </div>
                                <div v-else>
                                    <span class="avatar avatar-lg">
                                        <img :src="DEFAULT_NOBODY_AVATAR_URL" class="rounded-circle">
                                    </span>
                                </div>
                            </div>
                            <div>
                                vs
                            </div>
                            <div>
                                <div v-if="room.userId_B>0" class="text-center">
                                    <div class="avatar avatar-lg">
                                        <img :src="room.userB.avatarUrl || DEFAULT_AVATAR_URL" class="rounded-circle">
                                    </div>
                                    <div class="text-center">
                                        {{ room.userB.displayName }}
                                    </div>
                                    <div class="mt-1" v-if="room.finished">
                                        <span v-if="room.winUserId==room.userId_B" class="text-success">胜</span>
                                        <span v-else class="text-danger">负</span>
                                    </div>
                                </div>
                                <div v-else>
                                    <span class="avatar avatar-lg">
                                        <img :src="DEFAULT_NOBODY_AVATAR_URL" class="rounded-circle">
                                    </span>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </div>
            </el-card>
        </el-collapse-item>
    </el-collapse>
</div>
<div class="py-8"></div>
<div style="position:fixed;left:0;bottom:0;width:100%;" class="text-center mb-5 animate__animated animate__fadeInUp">
    <el-button-group class="rounded-0">
        <el-button class="rounded-0" type="primary" v-on:click="utils.closeLayerSelf" icon="el-icon-back">返 回</el-button>
    </el-button-group>
</div>
@section Scripts{
    <script src="/sitefiles/assets/js/app/exam/examPkRooms.js" type="text/javascript"></script>
}